<template>
	<view class="prodetailcontainer" v-show="showMain">
		<view class="out">
			<u-swiper :list="dataAll.images_text" height="450" circular radius="0"></u-swiper>
			<view class="product_middle">
				<view class="inner">
					<view class="top flexbetween">
					   <view class="flexleft tanprice">
				 		 <view class="newtanprice">￥{{dataAll.goodsprice.price}}</view>
						</view>
						<view class="xiaoliang">
							销量{{dataAll.goodsprice.sales}}
						</view>
					</view>
					<view class="descontent">{{dataAll.title}}</view>
				</view>
				<view class="xiangqing flexcenter">
					<view>
						<image src="../../static/images/shopping/img1.png"></image>
					</view>
					<view class="xiangtxt">商品详情</view>
					<view>
						<image src="../../static/images/shopping/img2.png"></image>
					</view>
				</view>
				<u-parse :content="dataAll.content"></u-parse>
			</view>
		</view>
		<view class="btn ffffff">
			<view class="btn-container" style="background-color: rgba(12, 224, 239, 1);"  @click="showcart">
				<text>立即购买</text>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" @close="show=false">
			<view class="guitan">
				<view class="tantop flexleft" style="margin: -30rpx;">
					<view class="item">
						<view class="flexcenter">
							<view class="flimg">
								<image :src="dataAll.image_text" mode=""></image>
							</view>
							<view class="pmiddle">
								<view class="flexleft tanprice">
									<view class="newtanprice">￥{{price}}</view>
								</view>
								<view class="kucun">库存:{{stock}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="guige" v-for="item in dataAll.spu" :key="item.id">
					<view class="tangui">{{item.name}}</view>
					<view class="guilist flexleft">
						<view :class="item.selecttext==ite?'guiitem active':'guiitem noactive'" 
						v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
					</view>
				</view>
				<view class="tannum tangui flexbetween">
					<view>购买数量</view>
					<view class="cartnumbox">
						<image class="jian" @click="jian()" src="../../static/images/hotel/jian.png"></image>
						<view class="num">{{number}}</view>
						<image class="jia" @click="jia()" src="../../static/images/hotel/jia.png"></image>
					</view>
				</view>
				<view class="tanbtn" @click="closeguige">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				number:1,
				listid: "",
				dataAll: {},
				price:"",//价格
				market_price:"",//划线价格
				sku_id:"",//规格id
				stock:"",//库存
				show: false,
				guigeflag:false,
				
				showMain:false,
			};
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.market_price = item.market_price //划线价格赋值
							this.stock = item.stock //库存
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			init() {
				let _this = this;
				httpRequest.request('api/goods/goodsDetail', 'GET', {
					goods_id: this.listid,
				}, false, false, false).then(res => {
					this.showMain=true
					if (res.code == 1) {
						res.data.spu.forEach(current => {
							current.item = current.item.split(",")
							this.$set(current, "selecttext", "")
						})
						this.dataAll = res.data
						this.price = res.data.goodsprice.price//价格
						this.market_price = res.data.goodsprice.market_price//划线价格
						this.stock = res.data.goodsprice.stock //库存
					}
				}).catch(err => {
					this.showMain=true
					httpRequest.toast(err.msg);
				})
			},
			showcart(){
			   if (!httpRequest.checkIsLogin()) {
			    httpRequest.doLogin();
			    return false;
			   }else{
				   this.show=true
			   }	
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			jia() {
				this.number++;
			},
			jian() {
				if(this.number==1){
					return false
				}
				this.number--
			},
			closeguige() {
				if(this.guigeflag==false){
					httpRequest.toast("请选则规格")
					return false
				}
				this.show=false
				let data = {
					type:"detail",//detail=商品详情，cart=购物车
					data:[{
						goods_id:this.dataAll.id,//商品id
						number:this.number,//数量
						sku_id:this.sku_id//规格id
					}]
				}
				uni.navigateTo({
					url: '/pages/shopping/querenorder?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss">
	.cartnumbox {
		display: flex;
		align-items: flex-end;
	
		.num {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 33rpx;
		}
	}
	.prodetailcontainer {
		background-color: #FAFAFA;
		min-height: 100vh;
	}

	// .outer{
	// 	padding-bottom: 400rpx;
	// }
	.headerimg {
		width: 100vw;
		height: 750rpx;

	}

	.himg {
		width: 100%;
		height: 100%;
	}

	.product_middle {
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.inner {
		padding: 30rpx;
		background-color: #FFFFFF;

		.top {
			.tanprice {
				font-size: 36rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FF5C00;
				line-height: 42rpx;

				.newtanprice {
					margin-right: 29rpx;
				}

				.tanoldprice {
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 26rpx;
					text-decoration: line-through;
				}
			}

			.xiaoliang {
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 26rpx;
			}
		}

		.descontent {
			margin-top: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 35rpx;
		}
	}

	.xiangqing {
		margin-top: 60rpx;

		image {
			width: 20rpx;
			height: 17rpx;
			margin-right: 44rpx;
		}

		.xiangtxt {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 38rpx;
			margin-right: 44rpx;
		}
	}
	.guitan {
		padding: 30rpx;
	}
	.item {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.flimg {
		width: 124rpx;
		height: 124rpx;
		margin-right: 30rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tanprice {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
		line-height: 42rpx;
	
		.newtanprice {
			margin-right: 29rpx;
		}
	
		.tanoldprice {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 28rpx;
			text-decoration: line-through;
		}
	}
	.kucun {
		margin-top: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		line-height: 30rpx;
	}
	
	.guige {
		margin-top: 68rpx;
	}
	
	.tangui {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 30rpx;
	}
	
	.guilist {
		margin-top: 30rpx;
	}
	
	.guiitem {
		margin-right: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 30rpx;
		padding: 9rpx 35rpx;
		border-radius: 26rpx;
	}
	
	.active {
		color: #00D2E1;
		background-color: rgba(0, 210, 225, 0.1);
	
	}
	
	.noactive {
		color: #666666;
		background-color: rgba(245, 245, 245, 1);
	}
	
	.tannum {
		margin-top: 30rpx;
	}
	.tanbtn {
		margin-top: 60rpx;
		text-align: center;
		background-color: rgba(0, 212, 226, 1);
		text-align: center;
		padding: 20rpx 0;
		border-radius: 41rpx;
		color: #fff;
	}
	.jia,
	.jian {
		width: 34rpx;
		height: 34rpx;
		padding: 0 14rpx;
	}
</style>
